<template>
  <view class="example-page">
    <view class="content">
      <view class="form-row">
        是否禁用
        <switch @change="switchDisabled" />
      </view>
      <view class="form-row">
        是否固定
        <switch @change="switchFixed" />
      </view>
      <view class="form-row">
        支持扩展
        <switch checked @change="switchExtend" />
      </view>
      <view class="form-row">
        手动打开扩展
        <switch @change="switchOpenExtend" />
      </view>
      <view class="form-row">
        开启磁吸
        <switch checked @change="switchMagnet" />
      </view>
      <view class="form-row">
        磁吸边
        <checkbox-group @change="checkMagnetChange">
          <label>
            <checkbox value="t" />
            上
          </label>
          <label>
            <checkbox value="r" />
            右
          </label>
          <label>
            <checkbox value="b" />
            下
          </label>
          <label>
            <checkbox value="l" />
            左
          </label>
        </checkbox-group>
      </view>
    </view>

    <sv-fab
      ref="fabRef"
      :extend="isExtend"
      :magnet="isMagnet"
      :fixed="isFixed"
      :disabled="isDisabled"
      safeArea="10,10,10,10"
      :defaultAxis="[305, 500]"
      @action="onAction"
    >
      <template #main>
        <view class="cus-main-btn">
          <view class="cus-main-icon">👻</view>
          <view>悬浮</view>
        </view>
      </template>
      <template #extend>
        <extend-round :extendGroup="extendGroup" @extendAction="onExtendAction">
          <template #e1>
            <view class="cus-extend-item">😄</view>
          </template>
          <template #e2>
            <view class="cus-extend-item">🥹</view>
          </template>
          <template #e3>
            <view class="cus-extend-item">😭</view>
          </template>
          <template #e4>
            <view class="cus-extend-item">😲</view>
          </template>
          <template #e5>
            <view class="cus-extend-item">🤪</view>
          </template>
        </extend-round>
      </template>
    </sv-fab>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import ExtendRound from '@/uni_modules/sv-fab/components/sv-fab/extend-round.vue'

const fabRef = ref()

function onAction(e) {
  console.log('onAction ==>', e)
}

const extendGroup = ref([
  { id: 'e1', name: '大笑' },
  { id: 'e2', name: '可怜' },
  { id: 'e3', name: '大哭' },
  { id: 'e4', name: '震惊' },
  { id: 'e5', name: '滑稽' }
])
function onExtendAction(e) {
  uni.showToast({
    title: e.name,
    icon: 'none'
  })
}

// 配置相关
const isExtend = ref(true)
function switchExtend(e) {
  isExtend.value = e.detail.value
}

const isDisabled = ref(false)
function switchDisabled(e) {
  isDisabled.value = e.detail.value
}

const isFixed = ref(false)
function switchFixed(e) {
  isFixed.value = e.detail.value
}

const isMagnet = ref(true)
function switchMagnet(e) {
  isMagnet.value = e.detail.value
}
function checkMagnetChange(e) {
  const side = e.detail.value
  isMagnet.value = side.toString()
}

function switchOpenExtend(e) {
  const open = e.detail.value
  if (open) {
    fabRef.value.openExtend()
  } else {
    fabRef.value.closeExtend()
  }
}
</script>

<style lang="scss">
.example-page {
  .content {
    padding: 10px;

    .form-row {
      margin-bottom: 10px;
    }
  }

  .cus-main-btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #66ccff33;
    color: #0000ff;

    .cus-main-icon {
      font-size: 20px;
    }
  }

  .cus-extend-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
}
</style>
